<!doctype html>
<html lang="en">
<head>
    <style>
        body {
            font: 14px/18px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #000000;
        }
        
        h2 { color: #4DB8FF; }
    .auto-style2 {
		font-family: Arial;
	}
	.auto-style5 {
		font-size: medium;
		font-family: "Times New Roman";
		color: #4DB8FF;
	}
	.auto-style6 {
		font-size: small;
		font-family: "Times New Roman";
	}
	.auto-style7 {
		color: #4DB8FF;
	}
	.auto-style8 {
		text-decoration: none;
	}
    </style>
	
	    <script type="text/javascript">
     
    function toggle(id) {
      var e = document.getElementById(id);
     
      if (e.style.display == '')
        e.style.display = 'none';
      else
        e.style.display = '';
    }
     
    </script>

</head>
<body style="height: 344px">
<div id="secondary">
    <h2 class="auto-style2">Set Vacation Help!</h2>
    
    <p class="auto-style6">Vacation management is to provide the users to create, update and delete vacations</p>
	<ul>
		<li>
		<p class="auto-style5">
		<a href="#" onclick="toggle('node1')" class="auto-style8">
		<span class="auto-style7">Vacation Title</span></a></p>
		<dl id="node1" style="display:none">
			
			<p class="auto-style6">Title of the vacation.</p>
		
		</dl>
		</li>
		<li>
		<p class="auto-style5">
		<a href="#" onclick="toggle('node2')" class="auto-style8">
		<span class="auto-style7">Vacation From</span></a></p>
		<dl  id="node2" style="display:none">
		
                    <p class="auto-style6">Starting date of vacation.</p>
		
		</dl>
		</li>
		<li>
		<p class="auto-style5">
		<a href="#" onclick="toggle('node3')" class="auto-style8">
		<span class="auto-style7">Vacation To</span></a></p>
		
		<dl id="node3" style="display:none">
		
			<p class="auto-style6">Ending date of vacation.</p>
		
		</dl>
                </li>
                <li>
		<p class="auto-style5">
		<a href="#" onclick="toggle('node4')" class="auto-style8">
		<span class="auto-style7">Alerts to</span></a></p>
		<dl id="node4" style="display:none">
			
                    <p class="auto-style6">The alert messages are forwarded to selected user. </p>
		
		</dl>
		</li>
               
		 <li>
		<p class="auto-style5">
		<a href="#" onclick="toggle('node5')" class="auto-style8">
		<span class="auto-style7">Message</span></a></p>
		<dl id="node5" style="display:none">
			
                    <p class="auto-style6">The message is sent to the selected user. </p>
		
		</dl>
		</li>
               
               
	</ul>
    <p class="auto-style6">Press set vacation to create vacation</p>
</div>
    
</body>
</html>